<style scoped>
  .discount_kinds_wrap img {
    width: auto;
    height: 46px;
  }

  .weui-col-25 p {
    color: #222
  }

  .list_wrap_1 {
    overflow: hidden;
    clear: both;
    background-color: #fff;
    margin-top: 15px;
  }

  .list_cell_1 {
    border-left: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
  }

  .list_innerCell_1 {
    overflow: hidden;
    padding: 15px;
  }

  .list_innerCell_1 a {
    height: 187px;
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .pro_img_0 img {
    width: 100%;
  }

  .pro_img_1 img {
    width: 100%;
  }

  .txt_cell_1 {
    overflow: hidden;
    height: 34px;
    padding-top: 5px;
  }

  .txt_cell_1 h3 {
    font-size: 15px;
    height: 22px;
    overflow: hidden;
    font-weight: 100;
    color: #222222;
  }

  .txt_cell_1 p {
    font-size: 12px;
    line-height: 16px;
    font-weight: 100;
    overflow: hidden;
    color: #888888;
  }

  .list_cell_2 img {
    width: 100%;
  }

  .txt_cell_2 h3 {
    font-size: 15px;
    height: 22px;
    overflow: hidden;
    font-weight: 100;
    color: #222222;
  }

  .txt_cell_2 p {
    font-size: 13px;
    line-height: 16px;
    height: 32px;
    overflow: hidden;
    font-weight: 100;
    color: #888888;
  }

  .weui-col-50 {
    width: 50%;
    float: left;
    box-sizing: border-box;
  }

  .banner_1 img {
    width: 100%;
    height: auto;
  }

  .list_cell_3 img {
    width: 100%;
  }

  .copyright_box_1 a, .copyright_box_1 a:visited {
    display: block;
    color: #888888;
  }

  .copyright_box_1 a:hover {
    display: block;
    color: #dd2727;
  }

  .course-icons-item img {
    border-radius: 50%;
    width: 60%
  }

  .tuijianimg {
    width: 100%;
  }

  .list_innerCell_1 .price {
    color: #f9416a;
    font-size: 13px;
    line-height: 1em;
    padding-top: 5px;
  }

  .fl {
    float: left;
  }

  .list_box_1 {
    overflow: hidden;
    margin-left: -1px;
  }

  .box1 {
    height: 100px;
    position: relative;
    width: 1490px;
  }

  .box1-item {
    width: 100px;
    height: 100px;
    margin-left: 15px;
    float: left;
    text-align: center;
  }

  .logo {
    width: 80%;
    height: 80%;
    border: 1px solid #ebebeb;
  }

  .doumi {
    color: white;
    vertical-align: middle;
    margin-bottom: 5px;
    width: 20px;
    height: 20px;
  }

  .card-demo-flex {
    display: flex;
  }

  .card-demo-content01 {
    padding: 10px 0;
  }

  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }

  .card-demo-flex span {
    color: #f74c31;
  }

</style>
<template>
  <scroller lock-x height="100%" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom">

    <div class="list_box_1">
      <x-header style="background-color:#ffffff;">逗米</x-header>

      <swiper loop auto :list="demo06_list"></swiper>

      <!--<div class="list_wrap_1">
        <div class="weui-panel__hd">商家推荐</div>
        &lt;!&ndash;:scrollbar-x=false :bounce=false&ndash;&gt;
        <scroller lock-y scrollbar-x ref="scrollerRight">
          <div class="box1">
            <div class="box1-item" v-for="business in business">
              <a :href="'http://yirenyiti.gaozhikeji.com/h5/detail.html?type=3&id='+business.id">
                <img :src="business.logo" class="logo"></a>
            </div>
          </div>
        </scroller>
      </div>-->

      <card :header="{title:'我的'}">
        <div slot="content" class="card-demo-flex card-demo-content01">
          <div>
            <span>{{myDouMi}}</span>
            <br/>
            逗米
          </div>
          <div>
            <router-link :to="{ path: 'order_list'}">
              <span><img src="../assets/img/order-2.png" style="color: white;width: 15px;height: 15px;"/></span>
              <br/>
            </router-link>
            订单
        </div>
        </div>
      </card>

      <div class="list_wrap_1">
        <div class="weui-panel__hd">逗米商城 <span style="float: right;font-size: 12px;color: #424242">用逗米直接换</span></div>
        <div class="weui-col-50 list_cell_1" v-for="item in goods">
          <div class="list_innerCell_1">
            <router-link :to="{ path: 'goods?id='+item.id}">
              <img :src="item.logo" class="tuijianimg">
            </router-link>
            <div class="txt_cell_1">
              <p>{{item.name}}</p>
            </div>
            <p class="price fl"><img src="../assets/img/doumi.png" class="doumi"/><b
              style="font-size:16px;">{{item.douMi | format}}</b></p>
            <div style="float: right;font-size:12px;">京东￥<b>{{item.proposedPrice | format}}</b></div>
          </div>
        </div>
        <h1 v-if="showLoad">
          <load-more :tip="'玩命加载中'"></load-more>
        </h1>

        <h1 v-if="showNull">
          <load-more :show-loading="false" :tip="'没有商品啦~'" background-color="#fbf9fe"></load-more>
        </h1>
      </div>
      <toast v-model="success">{{message}}</toast>
      <toast v-model="error" type="warn">{{errorMessage}}</toast>
    </div>
  </scroller>

</template>

<script>
  import {
    XHeader,
    Scroller,
    Swiper,
    SwiperItem,
    Loading,
    LoadMore,
    Toast,
    Card
  } from 'vux'
  import common from '../services/common';

  const baseList = [{
    url: '',
    img: 'http://yirenyiti.gaozhikeji.com/editor/image/20170926/1506419246266046243.jpg',
    title: '快来消费吧'
  }];

  const urlList = baseList.map((item, index) => ({
    url: item.url,
    img: item.img,
    fallbackImg: item.fallbackImg,
    title: `${item.title}`
  }));

  export default {
    data() {
      return {
        message: "成功",
        errorMessage: "失败",
        success: false,
        error: false,
        showLoad: true,
        showNull: false,
        goods: [],
        business: [],
        myDouMi: 0,
        form: {
          page: "1",
          size: "10",
        },
        form2: {
          offset: "1",
          limit: "12",
        },
        demo06_list: urlList,
        onFetching: false
      }
    },
    components: {
      XHeader,
      Scroller,
      Swiper,
      SwiperItem,
      Loading,
      LoadMore,
      Toast,
      Card
    },
    mounted: function () {
      if (common.checkLogin()) {
       } else {
       common.setStorage('auth_success_redirect_to', location.href);
       location.replace('http://yirenyiti.gaozhikeji.com/daiyan/wx/entrance?type=' + encodeURIComponent('auth.html?type=0'));
       }

      const user = JSON.parse(common.getStorage("user"));
      this.myDouMi = user.douMi;

      document.title = "主页"
      this.onScrollBottom();
      /*this.hotBusiness();*/
    },
    filters: {  //数据过滤器
      format: function (value) {
        if (value >= 10000) {
          value = value / 10000 + '万';
        }
        return value;
      }
    },
    methods: {
      onScrollBottom () {
        if (this.onFetching) {
          // do nothing
        } else {
          this.onFetching = true;
          common.post(common.getRequestData("goods", this.form), (res) => {
            if (res.data.responseCode == '0000') {
              if (res.data.data.length <= 0) {
                this.showLoad = false;
                this.showNull = true;
              } else {
                this.form.page++;
                this.goods = this.goods.concat(res.data.data);
                this.load = false;
                this.$nextTick(() => {
                  this.$refs.scrollerBottom.reset();
                });
                this.onFetching = false
              }
            } else {
              this.error = true;
              this.errorMessage = res.data.responseMsg;
            }
          }, false);
        }
      },
      hotBusiness(){
        common.post(common.getRequestData("hotBusiness", this.form2), (res) => {
          if (res.data.responseCode == '0000') {
            this.business = res.data.data.dataList;
            this.$nextTick(() => {
              this.$refs.scrollerRight.reset()
            });
          } else {
            this.error = true;
            this.errorMessage = res.data.responseMsg;
          }
        }, false);
      },

    },
  }
</script>
